<template>
  <Dialog
    width="910px"
    title="关联厂家商品"
    :visible.sync="innerVisible">
    <el-row>
      <el-col class="tag-gutter-5" :span="24">
        <el-tag
          v-for="tag in selectedRow"
          :key="tag.productId"
          closable
          @close="closeTag(tag, $event)"
        >
          {{tag.productName}}
        </el-tag>
      </el-col>
      <el-col :span="24">
        <el-row :gutter="15">
          <el-form ref="searchForm" class="el-form-col" :model="search">
            <el-col :span="6">
              <el-form-item prop="manufacturersName">
                <el-input :maxlength="50" clearable placeholder="厂家名称" v-model="search.manufacturersName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="productName">
                <el-input :maxlength="50" clearable placeholder="商品名称" v-model="search.productName"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item>
                <!--<el-button :loading="httpLoading" type="primary" @click.prevent="searchFunc">搜索</el-button>-->
                <el-button type="primary" :loading="httpLoading" plain native-type="submit" @click.prevent="searchFunc()"><span>搜索</span></el-button>
                <el-button @click.prevent="resetFields">重置</el-button>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
      </el-col>
    </el-row>
    <el-row class="row">
      <el-col :span="24">
        <el-table
          v-loading="httpLoading"
          border
          ref="elTable"
          max-height="500"
          :data="tableData"
          style="width:100%"
          @selection-change="selectionChange"
        >
          <el-table-column
            width="35"
            prop="manufacturersName"
            align="center"
          >
            <template slot-scope="scope">
              <el-radio :value="row.productId" :label="scope.row.productId">&nbsp;</el-radio>
            </template>
          </el-table-column>

          <el-table-column
            min-width="120"
            prop="manufacturersName"
            align="center"
            label="厂家名称"
          >
          </el-table-column>

          <el-table-column
            prop="productNo"
            align="center"
            min-width="120"
            label="商品编号">
          </el-table-column>
          <el-table-column
            prop="productName"
            align="center"
            min-width="360"
            label="商品名称">
          </el-table-column>
          <el-table-column
            prop="bigClass"
            align="center"
            min-width="100"
            label="商品大类">
          </el-table-column>
          <el-table-column
            prop="middleClass"
            align="center"
            min-width="100"
            label="商品小类">
          </el-table-column>
          <el-table-column
            prop="standard"
            align="center"
            min-width="100"
            label="规格">
          </el-table-column>
        </el-table>
        <div style="margin-top: 10px;">
          <Pagination class="pull-right" :page="params.pageNum" :perItem="params.pageSize" :totalItem="totalItem"
                      @pagination="selectPage" @sizeChange="handleSizeChange"></Pagination>
        </div>
      </el-col>
    </el-row>
    <div slot="footer">
      <el-button @click="innerVisible = false">关闭窗口</el-button>
      <el-button type="primary" :loading="loading" @click="submit">保存</el-button>
    </div>
  </Dialog>
</template>
<script>
import {unixTimestampFilter} from '@/filters'
import {dotData, merge} from '@/utils'
export default {
  name: 'BeLinkModal',
  components: {
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  filters: {
    unixTimestampFilter
  },
  watch: {
    visible(val, oldVal) {
      if (val === oldVal) {
        return
      }
      this.innerVisible = val
      this.params = {
        pageSize: this.params.pageSize,
        pageNum: 1
      }
      if (val) {
        this.resetFields()
        this.tableSelectedMap = new Map()
        this.selectedRow = []
        this.httpGetPackage()
      }
    },
    innerVisible(val, oldVal) {
      if (val === oldVal) {
        return
      }
      this.$emit('update:visible', val)
    }
  },
  data() {
    return {
      innerVisible: this.visible,
      loading: false,
      params: {
        pageSize: 5,
        pageNum: 1
      },
      search: {
        manufacturersName: '',
        productName: '',
        packageName: '',
        productNo: ''
      },
      totalItem: 0,
      tableData: [],
      tableDataMap: new Map(),
      tableSelectedMap: new Map(),
      selectedRow: this.value,
      httpLoading: false
    }
  },
  created() {
  },
  computed: {
  },
  methods: {
    resetFields() {
      if (this.$refs.searchForm) {
        this.$refs.searchForm.resetFields()
      }
    },
    // 选中
    selectionChange(selection) {
      let selectionMap = new Map()
      selection.forEach(v => {
        this.tableSelectedMap.set(v.productId, v)
        selectionMap.set(v.productId, v)
      })
      this.tableData.forEach(v => {
        if (!selectionMap.has(v.productId)) {
          if (this.tableSelectedMap.has(v.productId) && !this.httpLoading) {
            this.tableSelectedMap.delete(v.productId)
          }
        }
      })
      if (!this.httpLoading) {
        this.selectedRow = [...this.tableSelectedMap.values()]
      }
    },
    // 关闭标签页
    closeTag(item) {
      if (this.tableSelectedMap.has(item.productId)) {
        this.tableSelectedMap.delete(item.productId)
      }
      // 反选table
      this.tableData.forEach((v, index) => {
        if (v.productId === item.productId) {
          this.$refs.elTable.toggleRowSelection(v)
        }
      })
      this.selectedRow = [...this.tableSelectedMap.values()]
    },
    // 数据发送
    submit() {
      // this.$emit('addPackage', this.selectedRow)
      // this.innerVisible = false
      let data = []
      this.$ajax.post('/ms-fahuobao-order/FhbAdditional/saveAdditionalFee', data).then(response => {
        const success = dotData(response, 'success')
        if (success) {
          this.$confirm('关联成功', '提示', {
            type: 'success',
            center: true,
            confirmButtonText: '确定',
            showCancelButton: false,
            closeOnClickModal: false
          }).then(_ => {
            this.$router.push({path: '/redirect/ss-oms/basicData/production/index'})
          })
        }
        this.loading = false
      }).catch(_ => {
        this.loading = false
      })
    },
    // 获取包件
    httpGetPackage() {
      this.tableData = []
      this.httpLoading = true
      return this.$ajax.table('/ms-warehouse-order/basicData/findManufacturersProductList', this.params).then(response => {
        this.totalItem = response.totalItem
        this.tableData = response.data
        this.tableDataMap = new Map()
        this.tableData.forEach(v => {
          this.tableDataMap.set(v.productId, v)
        })
        return this.tableDataMap
      }).finally(_ => {
        this.httpLoading = false
      })
    },
    selectPage(page) {
      this.params.pageNum = page
      this.httpGetPackage()
    },
    searchFunc() {
      this.params = merge(this.params, this.search)
      this.tableSelectedMap = new Map()
      this.selectedRow = []
      this.httpGetPackage()
    },
    handleSizeChange(size) {
      this.params.pageSize = size
      this.httpGetPackage()
    }
  }
}
</script>
